<template>
  <div v-if="show">
    <component  :is="cases"/>
  </div>
  <div class="empty" v-else>空空如也~</div>
</template>

<script setup>
import {exportModuleForVue} from '../case/case-module'
import { ref,shallowRef,watch } from 'vue'
let cases = shallowRef('')
let show = ref(false)

const props = defineProps({
  alias:{
    type:String,
    default:''
  }
})

watch(() => props.alias, (val) => {
  if (val) {
    //案例模块发生改变 切换主体内容
    changeModule(val)
  }
})

//主体内容切换
const changeModule = (alias)=>{
  let Component = exportModuleForVue('case'+alias)
  if (Component){
    Component.then((data)=>{
      if (data){
        cases.value = data.default
        show.value = true
      }else {
        show.value = false
      }

    })
  }else {
    show.value = false
  }


}


</script>

<style scoped>
.empty{
  width: 100%;
  height: 50px;
  border: 1px #888888 dashed;
  border-radius: 5px;
  margin-top: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #6c6c6c;
}
</style>